<template>
	<view>
		<mvBar :mysNavConfig="mysNavConfig" @onLeftClick="onLeftClick"></mvBar>
		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>
		<view style="width: 90%; margin: 10px auto;">
			<u--form labelPosition="left">
				<u-form-item label="用户名" labelWidth="70" borderBottom>
					<u--input v-model="value" border="none" placeholder="请输入用户名"></u--input>
				</u-form-item>
			</u--form>
			<view style="margin: 20px 0px;">
				<u-button type="primary" text="添加" @click="adduser"></u-button>
			</view>
			<uni-list v-if="userlist.length!==0">
				<uni-list-item v-for="(item,index) in userlist" :key="index">
					<template v-slot:body>
						<text class="slot-box slot-text">{{item.userName}}</text>
					</template>
					<template v-slot:footer>
						<u-tag text="删除" type="error" plain @click="deluser(item.userName)"></u-tag>
					</template>
				</uni-list-item>
			</uni-list>
			<view v-else class="addtitle">请添加需要授权设备的用户,最多添加五名!</view>
			<view style="margin: 20px 0px;">
				<u-button type="primary" text="下一步" @click="gotonext"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mysNavConfig: {
					/* 占位开启  */
					navPadding: true,
					/* 背景 */
					bgColor: "#2979FF",
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "授权用户",
						color: "#ffffff",
						fontSize: "18px", // px upx rpx
						fontWeight: "500", // 100 - 700
					},
					isCustomFn: true,
					btnType: "type2",
					type2Config: {
						// 左图标
						leftPath: "/static/img/back.png",
						// 右图标
						rightPath: "/static/img/home.png",
						// 圆角
						radius: "40rpx",
					}
				},
				value: '',
				userlist: [],
				userinfo: '',
			}
		},
		onLoad(parameter) {
			this.userinfo = uni.getStorageSync('userinfo');
			if (JSON.stringify(parameter) !== "{}") {
				this.userlist = JSON.parse(decodeURIComponent(parameter.content));
			}
		},
		methods: {
			//返回
			onLeftClick() {
				uni.redirectTo({
					url: '/pages/entrust/equipmentEntrust'
				})
			},
			//添加用户
			adduser() {
				if (this.value == '') {
					this.$utils.showToast(this, "用户名不能为空！", 'warning');
					return;
				}
				if (this.userlist.length >= 5) {
					this.$utils.showToast(this, "添加已达到上限！", 'warning');
					return;
				}
				for (let i of this.userlist) {
					if (i.userName == this.value) {
						this.$utils.showToast(this, "该用户已存在,请重新输入！", 'warning');
						return;
					}
				}
				uni.showLoading({
					title: "添加中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_inquireuserid.replace(
						"{userRealId}", this.userinfo.userRealId).replace(
						"{userName}", this.value),
					method: "GET",
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							this.$utils.showToast(this, '添加成功！', 'success');
							this.userlist.push(res.data.data)
							this.value = ''
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail: () => {
						this.$utils.showToast(this, '添加失败！', 'error');
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			},
			// 删除用户
			deluser(value) {
				for (var i = 0; i < this.userlist.length; i++) {
					if (this.userlist[i].userName == value) {
						this.userlist.splice(i, 1)
						break
					}
				}
			},
			//跳转到下一步添加用户设备
			gotonext() {
				if (this.userlist.length !== 0) {
					let data = JSON.stringify(this.userlist);
					uni.redirectTo({
						url: `/pages/entrust/addEntrustequipment?content=${encodeURIComponent(data)}`
					})
				} else {
					this.$utils.showToast(this, "请先添加用户以后再进行下一步操作！", 'warning');
				}
			},
		}
	};
</script>

<style lang="scss">
	.cssBox {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
	}

	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}

	.slot-text {
		flex: 1;
		font-size: 15px;
		color: #3c9cff;
		margin-right: 10px;
	}

	.addtitle {
		margin: 20px;
		font-size: 16px;
		text-align: center;
		color: #b4b4b4;
	}
</style>